<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			li{
				width: 300px;
				line-height: 50px;
				margin: 20px;
				background-color: yellowgreen;
			}
		</style>
	</head>
	<body>
		<div>
			<ul class="cityList">
				
			</ul>
		</div>
	</body>
	<!--http://120.48.109.174:8081/area/hot-->
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript">
		$.ajax({
			type:"get",
			url:"http://120.48.109.174:8081/area/hot",
			async:true,
			success:function(res){
				for (var i=0;i<res.body.length;i++) {
					var item = res.body[i];
//					console.log(item);
					var str = "<li data-id="+item.value+">"+item.label+"</li>";
					$(".cityList").append(str);
					
				}
				getList()
//				console.log(res.body)
			}
		});
		
		function getList(){
			$(".cityList li").click(function(){
//				console.log($(this).data("id"))
//				console.log($(this).attr("data-id"));
				var id = $(this).data("id");
				$.ajax({
					type:"get",
					url:"http://120.48.109.174:8081/area",
					data:{
						"id":id
					},
					success:function(res){
						console.log(res)
					}
				});
			})
		}

	</script>
</html>
